<template>
	<div class="orderformation">
	<orderinformation :address="productlist.detailAddress"></orderinformation>
	<body class="body">
		<div class="product">
			<div class="contents">
				<div class="productInfomation">
					<div class="left">
						<img :src="productlist.thumbnail" />
					</div>
					<div class="right">
						<p class="title">{{productlist.productName}}</p>
						<p><span>零售价：</span><span style="color: #FF0000;">￥{{productlist.price}}元</span></p>
						<p><span>租赁押金：</span><span style="color: #FF0000;">￥</span><span style="color: #FF0000;">{{productlist.deposit}}元</span></p>
						<p><span>租赁价格：</span><span style="color: #FF0000;">￥</span><span style="color: #FF0000;">{{productlist.rentPrice}}</span><span style="color: #FF0000;">元/每天</span></p>
					</div>
				</div>
				<div class="details">
					<p class="shortDesc">【{{productlist.shortDesc}}】</p>
				</div>
			</div>
		</div>
		<div class="preferentialactives" v-if="productlist.productFavourables !== undefined && !!productlist.productFavourables && productlist.productFavourables.length >0">
			<p class="titleactive">此订单享有的优惠活动</p>
			<div class="actives" v-for="(item,index) in productlist.productFavourables">
			  <h3>{{item.favourType}}</h3>
			  <p class="details">{{item.favourDesc}}</p>
			</div>
		</div>
		<div class="orderinformation">
			<p class="orderheader">订单信息</p>
			<div class="rodercontent">				
				<p><span>订单编号：</span><span>{{productlist.rentSerial}}</span></p>
				<p><span>店铺名：</span><span>{{productlist.shopName}}</span></p>
				<p><span>用户：</span><span>{{productlist.userName}}</span></p>
				<p><span>电话：</span><span>{{productlist.phoneNo}}</span></p>
				<p v-if="!!productlist.rentDayCount"><span>租赁天数：</span><span>{{productlist.rentDayCount}}天</span></p>
				<p v-if="!!productlist.favourableAmount"><span>预付租金：</span><span>￥{{productlist.favourableAmount}}元</span></p>
				<p v-if="!!productlist.rentAmountCost"><span>租金：</span><span>￥{{productlist.rentAmountCost}}元</span></p>
				<p v-if="!!productlist.pickTime"><span>取货时间：</span><span>{{productlist.pickTime}}</span></p>
				<p v-if="!!productlist.returnTime"><span>还货时间：</span><span>{{productlist.returnTime}}</span></p>
				<p><span>创建时间：</span><span>{{productlist.createTime}}</span></p>
			</div>
		</div>
	</body>
</div>
</template>

<script>
import orderinformation from '@/components/m-shop/m-store/orderinformation'	
export default {
	name: 'orderformation',
	components:{
			orderinformation
		},
	data() {
		return {
			productlist: {},
		}
	},
	mounted() {
		this.getPayInformation();
	},
	methods: {
		//获取详情
		getPayInformation() {
			this.$http.get(this.$store.state.reqUrl + this.$route.query.shop_url + '/' + this.$route.query.shop_rentSerial, {}).then(res => {
				if(res.status == 200) {
					this.productlist = res.data;
				}
			})
		}
	}
}
</script>

<style lang="less" scoped>
    .orderformation {
    	font-size: 28px;
    	margin-top: 100px;
    	width: 100%;
    	.body {
    		background: none;
    		.product {
    			width: 100%;
    			margin-bottom: 20px;
    			background: #FFFFFF;
    			.contents {
    				padding: 20px 20px;   				
    				.productInfomation {
    					display: flex;
    					.left {
    						width: 120px;
    						height:  120px;
    						img {
    							width: 100%;
    							height: 100%;
    						}
    					}
    					.right {
    						font-size: 24px;
    						flex: 1;
    						margin-left: 20px;
    						.title{
    							font-size: 28px;
    							color: #000000;
    							font-weight: 700;
    						}
    						.shortDesc{
    							line-height: 30px;
    						}
    					}
    				}
    				.details{
    					font-size: 24px;
    					p{
    						padding-top: 20px;
    					}
    				}
    			}
    			
    			.rodertotalprice {
    				display: flex;
    				height: 40px;
    				font-size: 26px;
    				padding: 20px 0;
    				color: #000000;
    				.ordertitle {
    					flex: 1;
    				}
    				.price {
    					text-align: right;
    					flex: 1;
    				}
    			}
    		}
    		.preferentialactives{
		     	width:100%;
		     	background: #FFFFFF;
		     	margin:20px 0 20px 0;
		     	.titleactive{
		     		padding: 20px 20px 30px 20px;
    				color: #000000;
    				font-weight: 700;
    				font-size: 28px;
		     	}
		     	.details{
		     		font-size: 24px;
		     		text-indent: 2em;
		     		line-height: 45px;
		     	}
		     	.actives{
		     		padding:5px 20px;
		     		h3{
		     			color: #FF0000;
		     			padding:0 20px;
		     			font-size: 26px;
		     		}
		     	}
		     }
    		.orderinformation {
    			font-size: 26px;
    			background: #FFFFFF;
    			.orderheader {
    				padding: 20px 20px 10px 20px;
    				color: #000000;
    				font-weight: 700;
    				font-size: 28px;
    			}
    			.rodercontent{
    				line-height: 60px;
    				padding:20px 20px;    			
    		  }
    		}
    	}
    }
</style>